<script lang="ts" setup>
import { ActionBar, ActionBarButton, ActionBarIcon, showFailToast, showSuccessToast } from 'vant'
import { MaterialApi } from '~/api/MaterialApi'
import { OrderApi } from '~/api/OrderApi'
import StrPropertyEdit from '~/components/common/StrPropertyEdit.vue'
import { MaterialModel } from '~/model'
import { protectedAction } from '~/utils'

enum EditMode {
  None,
  New,
  Edit,
}

const route = useRoute()
const router = useRouter()
const material = ref(null as MaterialModel | null)
const mode = ref(EditMode.None)
const isNew = computed(() => mode.value === EditMode.New)

onMounted(() => {
  if (route.query.id) {
    mode.value = EditMode.Edit
    const id = Number.parseInt(route.query.id as string)
    MaterialApi.getAll()
      .then((materials) => {
        const _material = materials.find(x => x.id === id)
        if (!_material) {
          console.error('!_material')
          return
        }
        material.value = _material
      })
  }
  else if (route.query.new) {
    mode.value = EditMode.New
    material.value = new MaterialModel()
    material.value.id = 0
    material.value.unit = '个'
  }
})

async function onNew() {
  if (!material.value) {
    return
  }
  if (!material.value.name) {
    showFailToast('请输入物资名称')
    return
  }
  const ok = await MaterialApi.add(material.value)

  if (ok) {
    showSuccessToast('新建成功')
    setTimeout(() => {
      router.back()
    }, 500)
  }
  else {
    showFailToast('出错了，请联系管理员')
  }
}

async function onSave() {
  if (!material.value) {
    return
  }
  const ok = await MaterialApi.update(material.value.id, material.value)
  if (ok) {
    showSuccessToast('保存成功')
    setTimeout(() => {
      router.back()
    }, 50)
  }
  else {
    showFailToast('出错了，请联系管理员')
  }
}

async function onDelete() {
  if (!material.value) {
    return
  }

  // 执行删除动作
  const result = await MaterialApi.remove(material.value!.id)
  if (result.success) {
    showSuccessToast('删除成功')
    setTimeout(() => {
      router.back()
    }, 500)
  }
  else {
    if (result.message) {
      showFailToast(result.message)
    }
    else {
      showFailToast('出错了，请联系管理员')
    }
  }
}

async function onTakeOff() {
  if (!material.value) {
    return
  }
  MaterialApi.takeOff(material.value!.id)
    .then((ok) => {
      if (ok) {
        showSuccessToast('下架成功')
        setTimeout(() => {
          router.back()
        }, 500)
      }
      else {
        showFailToast('出错了，请联系管理员')
      }
    })
}

async function onRelist() {
  if (!material.value) {
    return
  }
  MaterialApi.relist(material.value!.id)
    .then((ok) => {
      if (ok) {
        showSuccessToast('恢复上架成功')
        setTimeout(() => {
          router.back()
        }, 50)
      }
      else {
        showFailToast('出错了，请联系管理员')
      }
    })
}
</script>

<template>
  <div v-if="material">
    <StrPropertyEdit
      :obj="material" :properties="[
        ['名称', 'name'],
        ['规格', 'specification'],
        ['单位', 'unit'],
        ['单价', 'unitPrice', 'number'],
        ['分组', 'group'],
        ['备注', 'comment'],
      ]"
    />

    <ActionBar>
      <ActionBarIcon v-if="!isNew" color="red" icon="delete-o" text="删除" @click="protectedAction(onDelete, '确定要删除商品吗？该操作不可逆', 1)" />

      <ActionBarButton v-if="!isNew && !material.takenOff" type="warning" text="下架" @click="protectedAction(onTakeOff, '下架将会使商品在创建订单时隐藏，确认操作？')" />
      <ActionBarButton v-if="!isNew && material.takenOff" type="success" text="恢复上架" @click="onRelist" />

      <ActionBarButton v-if="isNew" type="primary" text="新建" @click="onNew" />
      <ActionBarButton v-else type="primary" text="保存修改" @click="onSave" />
    </ActionBar>
  </div>
</template>

<route lang="yaml">
meta:
  title: 物资详情
</route>
